<template>
  <div class="fox">
    <div class="top">
      <div class="top-left">
        1024
      </div>
      <div class="top-morden">
        <div class="morden-left">
          <span class="iconfont icon-icon_bofang"></span>
          <div>正在播放 <span>{{music_play}}</span></div>
          </div>
          <div class="morden-right">
            <span class="iconfont icon-icon-"></span>
            <div>下一首 <span>{{music_next}}</span></div>
        </div>
      </div>
    </div>
    <div class="section">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
        background-color="#4D7A9C" text-color="#fff" active-text-color="#ffd04b" style="padding-left: 150px;">
        <el-menu-item index="1" @click="all">全部歌手</el-menu-item>
          <el-menu-item index="2">虚拟歌手</el-menu-item>
          <el-menu-item index="3">爱尔兰歌手</el-menu-item>
          <el-menu-item index="4">美国歌手</el-menu-item>
          <el-menu-item index="5">欧洲歌手</el-menu-item>
            <el-menu-item index="6">中国男歌手</el-menu-item>
            <el-menu-item index="7">中国女歌手</el-menu-item>
            <el-menu-item index="8">日本歌手</el-menu-item>
            <el-menu-item index="9">韩国歌手</el-menu-item>
      </el-menu>

      <el-carousel :interval="4000" type="card" height="250px">

        <el-carousel-item v-for="item in singerData " :key="item.id">
          <router-link :to="{name:'Singer',params:{url:item.singer_img_add, name:item.singer_name}}" >
            <img :src="item.singer_img_add" :title="item.singer_name">
          </router-link>
        </el-carousel-item>

      </el-carousel>
    </div>
    <ul class="foot" style="margin: 7.5px; padding: 7.5px;">
      <li class="nav-item">
        <span class="iconfont icon-shouye"></span>
        <div class="navItemTitle">
          <router-link to='main'>
            <div id="button1">首页</div>
          </router-link>
        </div>
      </li>
      <li class="nav-item">
        <span class="iconfont icon-fuwu"></span>
        <div class="navItemTitle">
          <div id="button2">服务</div>
        </div>
      </li>
      <li class="nav-item">
        <span class="iconfont icon-yuanchangbanchang"></span>
        <div class="navItemTitle">
          <div id="button3">伴唱</div>
        </div>
      </li>
      <li class="nav-item">
        <span class="iconfont icon-luyinshuohuashengyin"></span>
        <div class="navItemTitle">
          <div id="button4">录音</div>
        </div>
      </li>
      <li class="nav-item">
        <span class="iconfont icon-tiaoyin"></span>
        <div class="navItemTitle">
          <div id="button5">调音</div>
        </div>
      </li>
      <li class="nav-item">
        <span class="iconfont icon-zhongchang"></span>
        <div class="navItemTitle">
          <div id="button6">重唱</div>
        </div>
      </li>
      <li class="nav-item">
        <span class="iconfont icon-jia"></span>
        <div class="navItemTitle">
          <div id="button7"></div>
        </div>
      </li>
      <li class="nav-item">
        <span class="iconfont icon-redian"></span>
      </li>
      <li class="nav-item">
        <span class="iconfont icon-jian"></span>
        <div class="navItemTitle">
          <div id="button8"></div>
        </div>
      </li>
      <li class="nav-item">
        <span class="iconfont icon-sousuo"></span>
        <div class="navItemTitle">
          <router-link to='/search'>
            <div id="button9">搜索</div>

          </router-link>
        </div>
      </li>
      <li class="nav-item">
        <span class="iconfont icon-bofangheqiege" @click="nextMusic"></span>
        <div class="navItemTitle" @click="nextMusic">
          <div id="button10" @click="nextMusic">切歌</div>
        </div>
      </li>
      <li class="nav-item">
        <span class="iconfont icon-fenlei"></span>
        <div class="navItemTitle">
          <router-link to='/allsinger'>
            <div id="button11">歌手</div>
          </router-link>
        </div>
      </li>
      <li class="nav-item">
        <span class="iconfont icon-yidian"></span>
        <div class="navItemTitle">
          <el-popover placement="top-end" width="400" trigger="click">
            <el-table :data="Playlist" style="width: 100%" max-height="250">
              <el-table-column prop="music_name" label="歌曲名" width="120">
              </el-table-column>
              <el-table-column prop="music_singer_name" label="歌手" width="120">
              </el-table-column>
              <el-table-column prop="music_duration" label="时长" width="120">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="130">
                <template slot-scope="scope">
                  <el-button @click.native.prevent="deleteMusicInPlayList(scope.row)" type="text" size="small">
                    移除
                  </el-button>
                  <el-button @click.native.prevent="upRow(scope.row)" type="text" size="small">
                    下一首播放
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-button slot="reference" @click="showPalyList">列表</el-button>
          </el-popover>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
		music_file_add: this.GLOBAL.music_file_add, // 当前播放歌曲的文件路径
		isPlay: this.GLOBAL.isPlay, // 当前是否有歌曲在播放
        singerData:[],
        activeIndex: '1',
		music_play: this.GLOBAL.music_play,// 当前播放的歌名
		music_next: this.GLOBAL.music_next,// 下一首要播放的歌名
		Playlist:this.GLOBAL.playList,  // 播放列表
      }

    },
	created() {
		this.all();
	},
    methods: {
	  nextMusic(){
		// console.log(next_music)
		// 切歌
		var music_name = this.Playlist[0].music_name
		var music_singer_name = this.Playlist[0].music_singer_name
		var music_duration = this.Playlist[0].music_duration
		var row = {
			"music_name":music_name,
			"music_singer_name":music_singer_name,
			"music_duration":music_duration
		}
		this.isPlay = false
		this.deleteMusicInPlayList(row)

	  },
      all(){
		axios.get(`/api/music/singer/all/`)
		    .then((resultData) =>{
		  	  var status = resultData.data.status
		  	  if(status===200){
						var singer_data = resultData.data.data
						this.singerData = singer_data

						console.log(this.singerData)
		  		// this.tableData = music_data.data
						// console.log(this.tableData)
		  	  }
		      })
		    .catch()

      },
      handleSelect(key, keyPath) {
        console.log(key[0]);
		var index = key[0]
		var singer_type_list = ["虚拟", "爱尔兰", "美国", "欧洲"]
		var path = "";
		if(index != 1){
			if(index == 6){
				//中国男歌手
				path = "/api/music/singer/中国/m/"
			} else if(index == 7){
				//中国女歌手
				path = "/api/music/singer/中国/f/"
			} else if(index == 8){
				//日本歌手
				path = "/api/music/singer/日本/ /"
			} else if(index == 9){
				//韩国歌手
				path = "/api/music/singer/韩国/ /"
			} else {
				path = `/api/music/singer/${singer_type_list[index-2]}/ /`
			}
			axios.get(path)
			    .then((resultData) =>{
			  	  var status = resultData.data.status
			  	  if(status===200){
							var singer_data = resultData.data.data
							this.singerData = singer_data

							console.log(this.singerData)
			  		// this.tableData = music_data.data
							// console.log(this.tableData)
			  	  }
			      })
			    .catch()
		}

      },

			upRow(row) {
					  // 将指定歌曲移到列表第二位
					console.log(row)
					var music_name = row.music_name
					var music_singer_name = row.music_singer_name
					var music_duration = row.music_duration
					axios.post(`/api/music/playlist/upper/${music_name}/${music_singer_name}/${music_duration}/`)
					  .then((resultData) =>{
					          	  var status = resultData.data.status

					          	  if(status===202){
									this.showPalyList();
									this.$message({
									                message: resultData.data.message,
									                type: 'success'
									              })


					          	  } else {
					this.$message({
								    message: resultData.data.message,
								    type: 'warning'
								    })
					}
					    })
					  .catch()

			},
			deleteMusicInPlayList(row){
					// 将播放列表中的歌曲删除
					// console.log(index)
					console.log(row)
					var music_name = row.music_name
					var music_singer_name = row.music_singer_name
					var music_duration = row.music_duration
					axios.delete(`/api/music/playlist/del/music/${music_name}/${music_singer_name}/${music_duration}/`)
					  .then((resultData) =>{
					          	  var status = resultData.data.status

					          	  if(status===202){
									this.showPalyList();
									this.$message({
									                message: resultData.data.message,
									                type: 'success'
									              })


					          	  } else {
					this.$message({
								    message: resultData.data.message,
								    type: 'warning'
								    })
					}
					    })
					  .catch()
			},
			addToPlayList(row) {
			  // console.log(row);
					// 将歌曲添加到播放列表中
					var music_name = row.music_name
					var music_singer_name = row.music_singer_name
					var music_duration = row.music_duration
					// console.log(music_name)
					axios.post(`/api/music/playlist/order/${music_name}/${music_singer_name}/${music_duration}/`)
					  .then((resultData) =>{
					          	  var status = resultData.data.status

					          	  if(status===201){
					  				var music_data = resultData.data
					          		this.Playlist = music_data.data
					  				// console.log(this.Playlist)
									// console.log("添加方法")
									// console.log(resultData)
									this.$message({
									                message: resultData.data.message,
									                type: 'success'
									              })

					          	  } else {
					this.$message({
								    message: resultData.data.message,
								    type: 'warning'
								    })
					}
					    })
					  .catch()
			},
			play(){
					console.log(this.Playlist.length)
					if(!this.isPlay){
							console.log(this.isPlay)
						var music_name = this.Playlist[0].music_name
						var music_singer_name = this.Playlist[0].music_singer_name
						// var music_duration = this.Playlist[0].music_duration
						axios.get(`/api/music/play/${music_name}/${music_singer_name}/`)
						  .then((resultData) =>{
									  var status = resultData.data.status
									  if(status===200){
										 this.music_file_add = resultData.data.music_file_add

										 // window.location.href = this.music_file_add
										 window.open(this.music_file_add)
										 this.isPlay = true
										// this.Playlist = music_data.data
										// console.log(this.Playlist)


									  }
							})
						  .catch()
					}
			},
			showPalyList(){
				// 获取播放列表中的歌曲
				axios.get("/api/music/playlist/show/")
				  .then((resultData) =>{
				          	  var status = resultData.data.status
				          	  if(status===200){
				  				var music_data = resultData.data
				          		this.Playlist = music_data.data
				  				// console.log(this.Playlist)
								if(this.Playlist.length>=1){
									this.music_play = this.Playlist[0].music_name
									if (this.Playlist.length >= 2){
										this.music_next = this.Playlist[1].music_name
									}else {
											this.music_next = ''
										  }
										this.play()
								}
				          	  }
				    })
				  .catch()
			},

    },// end methods
	created() {
		this.all();
		this.showPalyList();
	}
  } // end vue
</script>

<style>
  .fox {
    height: 100%;
    width: 100%;

    background-color: #0077AA;
  }

  .top {
    height: 100px;
    float: left;
    display: flex;
  }

  .top-left {
    padding-left: 0;
    width: 200px;
    dispaly: flex;
    font-size: 50px;
    color: white;
    margin-left: 20px;
  }

  .top-morden {
    padding-left: 200px;
    width: 500px;
    display: flex;
    font-size: 10px;
    color: white;
    align-items: center;
    justify-content: space-around;
  }

  .section {
    padding-top: 100px;
/*    margin-left: 100px; */
    width: 100%px;
    height: 350px;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .foot {
    height: 100px;
 /*   width: 100%; */
   bottom: 0;
    position: relative;

    align-items: baseline;
    display: flex;
    justify-content: space-between;
    margin-left: auto;
    color: white;
    margin-left: 10px;
  }

  .a {
    text-decoration: none;
  }

  .router-link-active {
    text-decoration: none;
  }

  .navItemTitle {
    font-size: 10px;
    color: white;
    /*margin-top: 16px;*/

  }
  .a {
    text-decoration: none;
  }

  .router-link-active {
    text-decoration: none;
  }

  .nav-item {
    height: 100px;
    width: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .nav-item:hover {
    color: #990055;
  }

  .foot .nav-item .iconfont {
    font-size: 20px;
    color: white;
  }

  .el-button {
    background-color: #0077AA;
    border: 0;
    padding: 0;
    color: white;
    font-size: 10px;
  }
</style>
